
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>test</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<script src="./js/jquery.min.js"></script>
		<script src="./js/mui.min.js"></script>
		<script src="./js/layer/layer.js"></script>

		<style type="text/css">
			*{
				margin: 0rem;
				padding: 0rem;
				text-decoration: none;
				list-style: none;
				
			}
			html,body{
				background-color: #fff;
				width: 100%;
				height: 100%;
				 /*font-size:  100rem;*/
				 font-size: calc(100vw / 7.5);
				 font-family: "microsoft yahei";
			}
		
			/*内容*/
			.content{
				box-sizing: border-box;
				padding: 0.32rem;
				width: 100%;
			}
			.content{
				width: 100%;
			}
			.content form {
				width: 100%;
			}
			.content form .info{
				box-sizing: border-box;
				height: 1rem;
				line-height: 1rem;
				width: 100%;
				color: #9db2c3;
				border-color: #fff;
				padding: 0rem;
				border-bottom: 1px solid #e9f0f0;
			}
			
			.content form .sub{
				position: absolute;
				bottom: 0.8rem;
				left: 0.64rem;
				width: 6.25rem;
				height: 0.9rem;
				background: #7f9eba;
				color: #fff;
			}
			.content form .box{
				width: 100%;
				height: 7.68rem;
				background: #43475b;
				/*border-radius: 0.21rem;*/
			}
			.content form .box .top{
				width: 100%;
				height: 0.91rem;
				background: #393d4c;
				font-size: 0.28rem;
				line-height: 0.91rem;
				color: #fff;
				padding-left: 0.38rem;
				/*-moz-border-radius-topleft:0.21rem; 
				-moz-border-radius-topright: 0.21rem;*/
			}
			.content form .box .code{
				width: 100%;
				height: 4.88rem;
				position: relative;
			}
			.content form .box .code img{
				position: absolute;
				top: 0.94rem;
				left: 1.81rem;
				width:3.24rem;
				height:3.24rem;
				
			}
			.content form .box .info-box{
				position: relative;
				width: 100%;
				height: 0.72rem;
				font-size: 0.28rem;
				line-height: 0.72rem;
				color:#fff;
				text-align: center;
			}
			.content form .box .info-box .info{
				color:#fff;
				text-decoration: none;
				border-bottom: 0px;
			}
			.content form .box .foot{
				width: 100%;
				text-align: center;
				font-size: 0.5rem;
				color: yellow;
				margin-top:0.25rem;
			}
			#copyTarget{
				display: inline-block;
				border: 0px;
				position: absolute;
				top: 0.1rem;
				left:1.28rem;
			}
			#copyTarget,#hiddenText{
				opacity: 0;
				/* font-size: 0.26rem; */
				height: 1.1rem;
				width: 4.3rem;
				/* width: 4rem; */
				z-index: 1;
				line-height: 1.1rem;
				font-size: 0.26rem;
				padding: 0rem;
	
	
			}
			#hiddenText{
				opacity: 0;
				position: absolute;
				/* top: 1.1rem; */
				left: 1.26rem;
				padding: 0rem;
				
			}
			.info-box button{
				z-index: 10;
				text-align: left;
				margin-top: 0.15rem;
				font-size: 0.33rem;
				color: #9a9a9a;
				background: #43475b;
				border-radius: 12%;
				border:0px;
				color: yellow;
			}
		</style>
	</head>

	<body>
	
		
		<div class="wrapper" id="wrapper"></div>
		
		
		<div class="content">
			<form action="#" method="post">
				<div class="box">
					<div class="top">向客户收款</div>
					<div class="code">
						
							<img src="http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg" alt="" id="downcode">
						
					</div>
					<div class="info-box">
						<span>订单号：</span>
						<input id="copyTarget" value="" readonly class="info">
						<textarea id="hiddenText" class="hidden info" readonly></textarea>
						<span class="info" id="insetinfo">56565454546</span>
						<button type="button" id="copyButton">复制</button>
					</div>
					<div class="foot">转账时请备注订单号</div>
				</div>
				<!-- <a href="" download="fileName: 二维码" id="downloadImg"> -->
				<input type="button" class="sub" id="sub" value = "保存二维码扫描支付">
				<!-- </a> -->
				<button class="btn">kaishi</button>
			</form>
			<canvas id="cavasimg"></canvas>
		</div>
		<script src="./js/mui.min.js"></script>
		<script>
			
		//cavas 保存图片到本地  js 实现
        //------------------------------------------------------------------------
			
		$(".sub").on("click",function(){
					 plus.gallery.save( "http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg", function(){
						layer.msg("保存成功")
					} );	
					})
				
			function plusReady(){
					$(".sub").on("click",function(){
					 plus.gallery.save( "http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg", function(){
						layer.msg("保存成功")
					} );	
					alert("wobaocun")
					
					})
				}

				function render(){
					layer.msg("i am test page")
				}




		</script>
	</body>

</html>